import { useState } from "react";
import { useAuth } from "context/auth-context";
import { ProjectListScreen } from "screens/project-list";
import { Button, Dropdown, Menu, Popover } from "antd";
import styled from "@emotion/styled";
import { Row } from "./components/lib";
import { Routes, Route, Navigate } from "react-router";
import { BrowserRouter as Router, useNavigate } from "react-router-dom";
import { ReactComponent as SoftwareLogo } from "./assets/software-logo.svg";
import { ProjectScreen } from "screens/project";
import { Projectpopover } from "components/project-popover";
import { ProjectModal } from "screens/project-list/project-modal";
export const AuthenticatedApp = () => {
  // let navigate = useNavigate();
  const [projectVisible, setProjectVisible] = useState(false);
  return (
    <Container>
      <PageHeader setProjectVisible={setProjectVisible} />
      <div>
        <Router>
          <Routes>
            <Route
              path={"/projects"}
              element={
                <ProjectListScreen setProjectVisible={setProjectVisible} />
              }
            />
            <Route
              path={"/projects/:projectId/*"}
              element={<ProjectScreen />}
            />
            <Route path={"/"} element={<Navigate to={"/projects"} />} />
          </Routes>
        </Router>
      </div>
      <ProjectModal
        ProjectModalVisible={projectVisible}
        onClose={() => setProjectVisible(false)}
      />
    </Container>
  );
};
export interface setProjectModalProps {
  setProjectVisible: (isOpen: boolean) => void;
}
const PageHeader = (props: setProjectModalProps) => {
  const { logout, user } = useAuth();
  const { setProjectVisible } = props;
  const resetRoute = () => (window.location.href = window.location.origin);
  return (
    <Header between>
      <HeaderLeft gap={3}>
        <Button type={"link"} onClick={resetRoute} style={{ padding: 0 }}>
          <SoftwareLogo
            width={"20rem"}
            height={"100%"}
            color={"rgb(38,132,255)"}
          />
        </Button>
        <Projectpopover setProjectVisible={setProjectVisible} />
        <span>用户</span>
      </HeaderLeft>
      <HeaderRight>
        <Dropdown
          overlay={
            <Menu>
              <Menu.Item key={"logout"}>
                <Button onClick={logout} type={"link"}>
                  登出
                </Button>
              </Menu.Item>
            </Menu>
          }
        >
          <Button type={"link"} onClick={(e) => e.preventDefault()}>
            Hi, {user?.name}
          </Button>
        </Dropdown>
      </HeaderRight>
    </Header>
  );
};

const Container = styled.div`
  display: grid;
  grid-template-rows: 6rem 1fr;
  height: 100vh;
`;
const Header = styled(Row)`
  padding: 3.2rem;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  z-index: 1;
`;
const HeaderLeft = styled(Row)`
  display: flex;
  align-items: center;
`;

const HeaderRight = styled.div``;
